<template>
    <z-paging>
        <u-sticky>
            <hedsty :mrbot="32" :headCentext="status_str"></hedsty>
        </u-sticky>
        <view class="big_t_sk_box"
            style="background-image: url('https://morgan.dingxians.cn/static/orderDetail/1.png');">
            <view class="top_bopx" >
                <view class="huadong_box" v-for="item, index in orderDetailObj.order_detail" :key="index">
                    <view class="left_img_box">
                        <image :src="item.goods_image" mode="scaleToFill" />
                    </view>
                    <view class="right_boxss">
                        <view class="top_rt_top_box">{{ item.goods_name }}</view>
                        <view class="top_rt_bot_box">￥{{ item.goods_price }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="two_box" style="background-image: url('https://morgan.dingxians.cn/static/orderDetail/2.png');">
            <view class="two_ttt_box">收货地址</view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">姓名</view>
                <view class="rts_box">{{ orderDetailObj.order_username }}</view>
            </view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">电话</view>
                <view class="rts_box">{{ orderDetailObj.order_mobile }}</view>
            </view>
            <view class="name_box">
                <view class="lefts_box">具体位置</view>
                <view class="rts_box">{{ orderDetailObj.order_address }}</view>
            </view>
        </view>
        <view class="two_box" style="background-image: url('https://morgan.dingxians.cn/static/orderDetail/2.png');">
            <view class="two_ttt_box">收费详情</view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">商品</view>
                <view class="rts_box">¥{{ orderDetailObj.total_amount}}</view>
            </view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">运费</view>
                <view class="rts_box">¥{{ orderDetailObj.freight_amount }}</view>
            </view>
            <view class="name_box">
                <view class="lefts_box">总计</view>
                <view class="rts_box">{{ orderDetailObj.total_amount }}</view>
            </view>
        </view>
        <view class="two_box" style="background-image: url('https://morgan.dingxians.cn/static/orderDetail/2.png');">
            <view class="two_ttt_box">订单信息</view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">订单编号</view>
                <view class="rts_box">{{ orderDetailObj.order_no }}&emsp;<text style="color: brown;">复制</text></view>
            </view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">创建时间</view>
                <view class="rts_box">{{ orderDetailObj.created_at }}</view>
            </view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">支付方式</view>
                <view class="rts_box">{{ orderDetailObj.pay_type_str }}</view>
            </view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">订单类型</view>
                <view class="rts_box">{{ orderDetailObj.type == 1 ? '提货订单' : orderDetailObj.type == 2 ? '商城购买' : '商城兑换'
                    }}</view>
            </view>
            <view class="name_box">
                <view class="lefts_box">备注信息</view>
                <view class="rts_box">{{ orderDetailObj.remark || '无' }}</view>
            </view>
        </view>
        <view class="two_box" style="background-image: url('https://morgan.dingxians.cn/static/orderDetail/2.png');"
            v-if="orderDetailObj.status == 3 || orderDetailObj.status == 4">
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">快递单号</view>
                <view class="rts_box">{{ orderDetailObj.order_no }}&emsp;<text style="color: brown;">复制</text>
                </view>
            </view>
            <view class="name_box" style="margin-bottom: 50rpx;">
                <view class="lefts_box">国内承运</view>
                <view class="rts_box">{{ orderDetailObj.express_name }}</view>
            </view>
        </view>
        <view class="two_box" v-if="orderDetailObj.status == 1" style="background-image: url('https://morgan.dingxians.cn/static/orderDetail/2.png');">
            <view class="two_ttt_box">支付方式</view>
            <view class="zy_pay_type_box" v-for="(item, index) in payList" :key="index" @click="payType(item)">
                <view class="left_pay_icon_txt_box">
                    <view class="le_pay_icon_box">
                        <image :src="item.icon" />
                    </view>
                    <view class="pay_txt_box">{{ item.text }}</view>
                </view>
                <view class="right_icon_age_box">
                    <image v-if="payId == item.id" src="https://morgan.dingxians.cn/static/payImg/10.png" />
                    <image v-else src="https://morgan.dingxians.cn/static/payImg/7.png" />
                </view>
            </view>
        </view>


        <view v-if="orderDetailObj.status == 3" class="querenshouhuo_bn"
            style="background-image: url('https://morgan.dingxians.cn/static/editpic/4.png');" @click="submit">确认收货
        </view>
        <view v-if="orderDetailObj.status == 1" class="querenshouhuo_bn"
            style="background-image: url('https://morgan.dingxians.cn/static/editpic/4.png');" @click="enterSubmit">立即支付
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            status: '',
            status_str: '',
            orderId: '',
            orderDetailObj: {
                order_detail: [
                    {

                    }
                ]
            },
            payList: [{
                id: 1,
                text: '微信',
                icon: 'https://yq.dingxians.cn/upload/static/pay_icon/04.png'
            },
            // #ifdef APP-PLUS
            {
                id: 2,
                text: '支付宝',
                icon: 'https://yq.dingxians.cn/upload/static/pay_icon/05.png',
            },
                // #endif
                //      {
                //     id: 3,
                //     text: '元素',
                //     icon: 'https://morgan.dingxians.cn/static/payImg/1.png',
                // },
            ],
            payId: 1,
            remarkvalue: ''
        }
    },
    onLoad(e) {
        this.status = e.status
        this.status_str = e.status_str
        this.orderId = e.id
    },
    onShow() {
        this.getDetail()
    },
    methods: {
        getDetail() {
            this.$Request.get(this.$api.shop.orders + `/${this.orderId}`).then(res => {
                if (res.code == 200) {
                    this.orderDetailObj = res.data
                }
            })
        },
        submit() {
            this.$Request.put(this.$api.shop.ordersReceive + `/${this.orderId}`).then(res => {
                if (res.code == 200) {
                    this.$router('/userPage/order/order?status=' + 4)
                }
            })
        },
        enterSubmit() {
            this.$Request.post(this.$api.shop.ordersUpdate + `/${this.orderDetailObj.id}`).then(res => {
                if (res.code == 200) {
                    if (res.data.order_status == 2) {
                        this.$msg('购买成功')
                        setTimeout(() => {
                            this.$router('/userPage/order/order?status=' + 2)
                        }, 500)
                    } else {
                        var pay_data = res.data
                        if (pay_data.order_status == 1) {
                            if (this.payId == 2) {//支付宝
                                uni.requestPayment({
                                    provider: 'alipay',
                                    orderInfo: pay_data.data,
                                    success: (res) => {
                                        this.$msg('支付成功')
                                        this.$router('/userPage/order/order?status=' + 2)
                                    },
                                    fail: (error) => {
                                        this.$router('/userPage/order/order?status=' + 5)
                                    },
                                })
                            } else {
                                // #ifdef APP-PLUS
                                uni.requestPayment({
                                    provider: 'wxpay',
                                    orderInfo: pay_data.data,
                                    success: (res) => {
                                        this.$msg('支付成功')
                                        this.$router('/userPage/order/order?status=' + 2)
                                    },
                                    fail: (error) => {
                                        this.$router('/userPage/order/order?status=' + 5)
                                    },
                                })
                                // #endif
                                // #ifdef MP-WEIXIN
                                // uni.requestPayment({
                                // 	provider: 'wxpay',
                                // 	timeStamp: pay_data.timeStamp.toString(),
                                // 	nonceStr: pay_data.nonceStr,
                                // 	signType: 'MD5',
                                // 	package: pay_data.package,
                                // 	paySign: pay_data.paySign,
                                // 	success: (res) => {
                                // 		// this.$router(`/userPage/userOrder/userOrder`)
                                // 	},
                                // 	fail: (err) => {
                                // 		// this.$router(`/userPage/userOrder/userOrder`)
                                // 	},
                                // })
                                // #endif
                            }
                        }
                    }


                }
            })
        },
        payType(item) {
            this.payId = item.id
        },

    }
}
</script>
<style lang="scss" scoped>
.big_t_sk_box {
    width: 690rpx;
    max-height: 280rpx;
    padding: 30rpx 30rpx;
    margin: auto;
    margin-bottom: 50rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    .top_bopx {
        width: 690rpx;
        height: 240rpx;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;

        .huadong_box {

            width: 690rpx;
            height: 180rpx;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10rpx;

            .left_img_box {
                width: 120rpx;
                height: 120rpx;
                border-radius: 10rpx;
                background-color: rgba(23, 1, 3, 1);

                image {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 10rpx;
                }
            }

            .right_boxss {
                width: 488rpx;
                box-sizing: border-box;
                padding-top: 16rpx;

                .top_rt_top_box {
                    width: 100%;
                    height: 42rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #FFFFFF;
                    line-height: 42rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 29rpx;
                }

                .top_rt_bot_box {
                    width: 86rpx;
                    height: 27rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #FFEDD7;
                    line-height: 18rpx;
                }
            }
        }

    }
}


.two_box {
    width: 690rpx;
    min-height: 350rpx;
    margin: auto;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 40rpx 30rpx;
    margin-bottom: 50rpx;

    .zy_pay_type_box {
        width: 100%;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .left_pay_icon_txt_box {
            // width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-start;

            .le_pay_icon_box {
                width: 40rpx;
                height: 40rpx;
                margin-right: 20rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .pay_txt_box {
                height: 40rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
                line-height: 40rpx;
            }
        }

        .right_icon_age_box {
            width: 38rpx;
            height: 38rpx;

            image {
                width: 38rpx;
                height: 38rpx
            }
        }

        .right_icon_cocupup_box {
            height: 40rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .yohuiquan_box {
                height: 40rpx;
                line-height: 40rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #FFFFFF;

            }

            .jiantou_box {
                height: 32rpx;
                line-height: 46rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #FFFFFF;
                margin-left: 13rpx;
            }
        }
    }

    .two_ttt_box {
        width: 100%;
        height: 31rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 31rpx;
        margin-bottom: 50rpx;
    }

    .name_box {
        width: 100%;
        height: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .lefts_box {
            height: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 30rpx;
        }

        .rts_box {
            max-width: 400rpx;
            min-height: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 30rpx;
        }
    }
}

.querenshouhuo_bn {
    width: 529rpx;
    height: 120rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
    margin: auto;
    background-size: 100% 100%;
}
</style>